<template>
    <header>
        <div class="container-fluid">
            <div class="logo-nav">
                <RouterLink to="/console" class="logo-wrap">
                    <img class="logo" src="@/assets/logo.png" alt="Basic, Advanced and/or Thematic Courses for Teacher" />
                </RouterLink>
                <nav class="hidden-xs-only">
                    <ul>
                        <li>
                            <el-dropdown :teleported="false" max-height="500">
                                <span class="el-dropdown-link">
                                    {{ $t('header.nav.nav1') }}({{courseList.length || 0}})
                                    <el-icon class="el-icon--right">
                                        <arrow-down />
                                    </el-icon>
                                </span>
                                <template #dropdown>
                                    <el-dropdown-menu v-loading="courseListLoading">
                                        <el-dropdown-item v-for="courseItem in courseList" :key="courseItem.id" @click="goPage(`/console/course/${courseItem.id}`)">{{
                                            courseItem.name
                                        }}</el-dropdown-item>
                                    </el-dropdown-menu>
                                </template>
                            </el-dropdown>
                        </li>
                        <li>
                            <RouterLink to="/console/mod/book">{{ $t('header.nav.nav2') }}</RouterLink>
                        </li>
                        <li>
                            <RouterLink to="/console/mod/contact">{{ $t('header.nav.nav3') }}</RouterLink>
                        </li>
                        <li>
                            <el-dropdown :teleported="false">
                                <span class="el-dropdown-link">
                                    {{ langList[locale] }}
                                    <el-icon class="el-icon--right">
                                        <arrow-down />
                                    </el-icon>
                                </span>
                                <template #dropdown>
                                    <el-dropdown-menu>
                                        <el-dropdown-item @click="switchLangHandle('en')">English</el-dropdown-item>
                                        <el-dropdown-item @click="switchLangHandle('zh-hk')">繁體中文</el-dropdown-item>
                                        <!-- <el-dropdown-item @click="switchLangHandle('zh-cn')">简体中文</el-dropdown-item> -->
                                    </el-dropdown-menu>
                                </template>
                            </el-dropdown>
                        </li>
                        <li v-if="roleStore.isSuperAdmin">
                            <RouterLink to="/console/question">{{ $t('header.nav.nav4') }}</RouterLink>
                        </li>
                        <li v-if="roleStore.isSuperAdmin">
                            <RouterLink to="/console/course/category">{{ $t('header.nav.nav5') }}</RouterLink>
                        </li>
                        <li v-if="roleStore.isSuperAdmin">
                            <RouterLink to="/console/user/manager">{{ $t('header.nav.nav6') }}</RouterLink>
                        </li>
                    </ul>
                </nav>
                <el-drawer v-model="isShowMenu" direction="rtl" size="60%" :with-header="false" class="hidden-sm-and-up" body-class="custom-drawer-body">
                    <div class="mobile-nav-wrap">
                        <div class="mobile-nav">
                            <RouterLink to="/console" class="logo-nav">
                                <img class="logo" src="@/assets/logo.png" alt="Basic, Advanced and/or Thematic Courses for Teacher" />
                            </RouterLink>
                            <el-menu class="el-menu-vertical">
                                <el-sub-menu index="1">
                                    <template #title>
                                        <span>{{ $t('header.nav.nav1') }}</span>
                                    </template>
                                    <el-menu-item-group>
                                        <el-menu-item v-for="courseItem in courseList" @click="goPage(`/console/course/${courseItem.id}`)" :key="courseItem.id">{{ courseItem.name }}</el-menu-item>
                                    </el-menu-item-group>
                                </el-sub-menu>
                                <el-menu-item index="2">
                                    <span>
                                        <RouterLink to="/console/mod/book" style="color: #303133">{{ $t('header.nav.nav2') }}</RouterLink>
                                    </span>
                                </el-menu-item>
                                <el-menu-item index="3">
                                    <span>
                                        <RouterLink to="/console/mod/contact" style="color: #303133">{{ $t('header.nav.nav3') }}</RouterLink>
                                    </span>
                                </el-menu-item>
                                <el-menu-item index="4" v-if="roleStore.isSuperAdmin">
                                    <span>
                                        <RouterLink to="/console/question" style="color: #303133">{{ $t('header.nav.nav4') }}</RouterLink>
                                    </span>
                                </el-menu-item>
                                <el-menu-item index="5" v-if="roleStore.isSuperAdmin">
                                    <span>
                                        <RouterLink to="/console/course/category" style="color: #303133">{{ $t('header.nav.nav5') }}</RouterLink>
                                    </span>
                                </el-menu-item>
                                <el-menu-item index="6" v-if="roleStore.isSuperAdmin">
                                    <span>
                                        <RouterLink to="/console/user/manager" style="color: #303133">{{ $t('header.nav.nav6') }}</RouterLink>
                                    </span>
                                </el-menu-item>
                            </el-menu>
                            <div class="fix-bottom">
                                <div class="header-tools" style="justify-content: center">
                                    <!-- 通知 -->
                                    <el-popover placement="bottom-end" :width="380" :teleported="false">
                                        <template #reference>
                                            <div class="notices-icon-wrap">
                                                <el-icon size="20" color="#000"><Bell /></el-icon>
                                                <div class="notices-number" v-if="noticesNumber > 0">{{ noticesNumber }}</div>
                                            </div>

                                            <!-- <el-tooltip effect="dark" content="切換通知選單" placement="bottom">
                        </el-tooltip> -->
                                        </template>

                                        <div class="popover-head">
                                            <span>{{ $t('header.tools.notify.tit') }}</span>
                                            <div class="tools-list">
                                                <el-icon size="14" color="#000"><Select /></el-icon>
                                                <el-icon size="14" color="#000" @click="goPage('/console/user/preferences/notification')"><Setting /></el-icon>
                                            </div>
                                        </div>
                                        <div class="popover-body">
                                            <ul class="notice-list" v-if="noticesUnreadList.length > 0">
                                                <li v-for="(item, index) in noticesUnreadList" :key="index" @click="router.push({ name: 'messageNotifications', query: { id: item.id } })">
                                                    <div class="notice-item-left">
                                                        <h4>{{ item.content }}</h4>
                                                        <p>{{ formatLoginTime(item.created_at) }}</p>
                                                    </div>
                                                    <div class="notice-item-right">
                                                        <el-button size="small" type="text" @click.stop="readAction(item.id)">{{ $t('header.tools.notify.read_txt') }}</el-button>
                                                    </div>
                                                </li>
                                            </ul>
                                            <el-empty v-else :description="$t('golbal.empty_desc')" image=" " />
                                        </div>
                                        <div class="popover-foot" @click="goPage('/console/message/notifications')">{{ $t('header.tools.notify.tip') }}</div>
                                    </el-popover>
                                    <!-- <el-tooltip effect="dark" :content="$t('header.tools.message.tip')" placement="bottom">
                    <el-icon size="20" color="#fff" @click="msgDrawer = true"><ChatRound /></el-icon>
                </el-tooltip> -->
                                    <el-tooltip effect="dark" :content="`${userinfo?.last_name} ${userinfo?.first_name}`" placement="bottom">
                                        <div class="tool-login" @click="userDialog = true">
                                            <el-icon size="20" color="#000"><User /></el-icon>
                                            <span style="color: #000">{{ userinfo?.last_name }} {{ userinfo?.first_name }}</span>
                                        </div>
                                    </el-tooltip>
                                </div>
                                <div class="lange">
                                    <el-dropdown :teleported="false">
                                        <span class="el-dropdown-link">
                                            {{ langList[locale] }}
                                            <el-icon class="el-icon--right">
                                                <arrow-down />
                                            </el-icon>
                                        </span>
                                        <template #dropdown>
                                            <el-dropdown-menu>
                                                <el-dropdown-item @click="switchLangHandle('en')">English</el-dropdown-item>
                                                <el-dropdown-item @click="switchLangHandle('zh-hk')">繁體中文</el-dropdown-item>
                                                <el-dropdown-item @click="switchLangHandle('zh-cn')">简体中文</el-dropdown-item>
                                            </el-dropdown-menu>
                                        </template>
                                    </el-dropdown>
                                </div>
                            </div>
                        </div>
                    </div>
                </el-drawer>
            </div>
            <div class="menu-toggle hidden-sm-and-up" @click="toggleIsShowMenu()">
                <el-icon size="30" color="#fff"><Menu /></el-icon>
            </div>
            <div class="header-tools hidden-xs-only">
                <!-- 通知 -->
                <el-popover placement="bottom-end" :width="380" :teleported="false">
                    <template #reference>
                        <div class="notices-icon-wrap">
                            <el-icon size="20" color="#fff"><Bell /></el-icon>
                            <div class="notices-number" v-if="noticesNumber > 0">{{ noticesNumber }}</div>
                        </div>

                        <!-- <el-tooltip effect="dark" content="切換通知選單" placement="bottom">
                        </el-tooltip> -->
                    </template>

                    <div class="popover-head">
                        <span>{{ $t('header.tools.notify.tit') }}</span>
                        <div class="tools-list">
                            <el-icon size="14" color="#e63946"><Select /></el-icon>
                            <el-icon size="14" color="#e63946" @click="goPage('/console/user/preferences/notification')"><Setting /></el-icon>
                        </div>
                    </div>
                    <div class="popover-body">
                        <ul class="notice-list" v-if="noticesUnreadList.length > 0">
                            <li v-for="(item, index) in noticesUnreadList" :key="index" @click="router.push({ name: 'messageNotifications', query: { id: item.id } })">
                                <div class="notice-item-left">
                                    <h4>{{ item.content }}</h4>
                                    <p>{{ formatLoginTime(item.created_at) }}</p>
                                </div>
                                <div class="notice-item-right">
                                    <el-button size="small" type="text" @click.stop="readAction(item.id)">{{ $t('header.tools.notify.read_txt') }}</el-button>
                                </div>
                            </li>
                        </ul>
                        <el-empty v-else :description="$t('golbal.empty_desc')" image=" " />
                    </div>
                    <div class="popover-foot" @click="goPage('/console/message/notifications')">{{ $t('header.tools.notify.tip') }}</div>
                </el-popover>
                <!-- 111 -->
                <el-tooltip effect="dark" :content="$t('header.tools.message.tip')" placement="bottom">
                    <div class="message-icon-wrap">
                        <el-icon size="20" color="#fff" @click="msgDrawer = true"><ChatRound /></el-icon>
                        <div class="message-number" v-if="messageNumber > 0">{{messageNumber}}</div>
                    </div>
                    
                </el-tooltip>
                <el-tooltip effect="dark" :content="`${userinfo?.last_name} ${userinfo?.first_name}`" placement="bottom">
                    <div class="tool-login" @click="userDialog = true">
                        <el-icon size="20" color="#fff"><User /></el-icon>
                        <span>{{ userinfo?.last_name }} {{ userinfo?.first_name }}</span>
                    </div>
                </el-tooltip>
            </div>
        </div>

        <!-- 讯息列表 -->
        <div class="drawer-box" :class="{ open: msgDrawer }" v-if="$route.path !== '/console/message'">
            <div class="drawer-head">
                <el-icon size="16" color="#4c4c4c" @click="msgDrawer = false"><CircleCloseFilled /></el-icon>
            </div>
            <div class="drawer-body">
                <MessageList :openChatSearch="openChatSearchDrawer" :isOpen="msgDrawer" :openMsgSet="openMsgSetDrawer" :openAddressBook="openAddressBookDrawer" :openChat="openChatDrawer" />
            </div>
            <div class="drawer-foot">
                <span @click="goPage('/console/message')">{{ $t('header.drawer.message.foot') }}</span>
            </div>
        </div>

        <!-- 讯息列表设置 -->
        <div class="drawer-box" :class="{ open: msgSetDrawerStore.msgSetDrawer }">
            <div class="drawer-head">
                <el-icon size="16" color="#4c4c4c" @click="closeMsgSetDrawer"><CircleCloseFilled /></el-icon>
            </div>
            <div class="drawer-body">
                <div class="back-box">
                    <div class="cursor back-info" @click="closeMsgSetDrawer">
                        <el-icon size="16" color="#4c4c4c"><ArrowLeftBold /></el-icon>
                        <span>{{ $t('header.drawer.message_set.body.back_tetx') }}</span>
                    </div>
                </div>

                <el-form :model="setFormData" label-position="top" v-loading="setFormLoading">
                    <el-form-item :label="$t('header.drawer.message_set.body.form.label_1')">
                        <p class="tips">{{ $t('header.drawer.message_set.body.form.label_1_tip') }}</p>
                        <el-radio-group v-model="setFormData.who_can_send_message">
                            <el-radio value="1">{{ $t('header.drawer.message_set.body.form.label_1_radio_1') }}</el-radio>
                            <el-radio value="2">{{ $t('header.drawer.message_set.body.form.label_1_radio_2') }}</el-radio>
                        </el-radio-group>
                    </el-form-item>
                    <el-form-item :label="$t('header.drawer.message_set.body.form.label_2')">
                        <div class="switch-box">
                            <el-switch v-model="setFormData.isEmail" active-text="Email" size="small" />
                        </div>
                        <div class="switch-box">
                            <el-switch v-model="setFormData.isDevice" :active-text="$t('header.drawer.message_set.body.form.label_2_switch_2')" size="small" />
                        </div>
                    </el-form-item>
                    <el-form-item :label="$t('header.drawer.message_set.body.form.label_3')">
                        <div class="switch-box">
                            <el-switch v-model="setFormData.use_input_key" :active-text="$t('header.drawer.message_set.body.form.label_1')" size="small" />
                        </div>
                    </el-form-item>
                    <el-form-item class="btn-list">
                        <el-button @click="submitHandle" color="#F06423">{{ $t('golbal.btn_text_1') }}</el-button>
                    </el-form-item>
                </el-form>
            </div>
        </div>

        <!-- 通讯录 + 好友请求 -->
        <div class="drawer-box" :class="{ open: addressBookDrawer }">
            <div class="drawer-head">
                <el-icon size="16" color="#4c4c4c" @click="addressBookDrawer = false"><CircleCloseFilled /></el-icon>
            </div>
            <div class="drawer-body">
                <div class="back-box">
                    <div class="cursor back-info" @click="addressBookDrawer = false">
                        <el-icon size="16" color="#4c4c4c"><ArrowLeftBold /></el-icon>
                        <span>{{ $t('header.drawer.chat_contacts.body.back_tetx') }}</span>
                    </div>
                    <el-icon size="16" color="#4c4c4c" class="cursor" @click="chatSearchDrawer = true"><Search /></el-icon>
                </div>

                <AddressBook :openChat="openChatDrawer" />
            </div>
        </div>

        <!-- 聊天搜索 -->
        <div class="drawer-box" :class="{ open: chatSearchDrawer }">
            <div class="drawer-head">
                <el-icon size="16" color="#4c4c4c" @click="chatSearchDrawer = false"><CircleCloseFilled /></el-icon>
            </div>
            <div class="drawer-body">
                <div class="back-box">
                    <div class="cursor back-info" @click="chatSearchDrawer = false">
                        <el-icon size="16" color="#4c4c4c"><ArrowLeftBold /></el-icon>
                        <span>{{ $t('header.drawer.chat_search.body.back_tetx') }}</span>
                    </div>
                </div>
                <ChatSearch :openChat="openChatDrawer" />
            </div>
        </div>

        <!-- 聊天窗口 -->
        <div class="drawer-box" :class="{ open: chatDrawer }">
            <div class="drawer-head">
                <el-icon size="16" color="#4c4c4c" @click="chatDrawer = false"><CircleCloseFilled /></el-icon>
            </div>
            <div class="drawer-body">
                <ChatComp :isBack="true" ref="chatCompRef" :closeChat="closeChatDrawer" />
            </div>
        </div>

        <!-- 用户 -->
        <el-dialog v-model="userDialog" width="400" class="user-dialog-box mobile-dialog">
            <div class="theme-loginform">
                <div class="user-picture-container">
                    <div class="user-picture pic">
                        <img v-if="userinfo?.avatar_url" :src="userinfo?.avatar_url" class="ele" />
                        <el-icon v-else size="40" color="#fff"><User /></el-icon>
                    </div>
                    <div class="user-description">
                        <span>
                            {{ $t('header.drawer.user.desc_1') }}
                            <strong>{{ userinfo?.last_name }} {{ userinfo?.first_name }}</strong>
                            <span class="nline">({{ userinfo?.account }})</span>
                            {{ $t('header.drawer.user.desc_2') }}
                        </span>
                        <div class="user-buttons">
                            <el-button color="#27323A" @click="goPage('/console/user/profile')">{{ $t('header.drawer.user.btn_text_1') }}</el-button>
                            <el-button color="#F06423" @click="AuthService.logout()">{{ $t('header.drawer.user.btn_text_2') }}</el-button>
                        </div>
                    </div>
                </div>
                <div class="usermenu">
                    <ul>
                        <li>
                            <router-link to="/console/" @click="userDialog = false">{{ $t('header.drawer.user.menu_1') }}</router-link>
                        </li>
                        <li>
                            <router-link to="/console/user/profile" @click="userDialog = false">{{ $t('header.drawer.user.menu_2') }}</router-link>
                            <router-link to="/console/course/grades" @click="userDialog = false">{{ $t('header.drawer.user.menu_3') }}</router-link>
                            <router-link to="/console/message" @click="userDialog = false">{{ $t('header.drawer.user.menu_4') }}</router-link>
                            <router-link to="/console/user/preferences" @click="userDialog = false">{{ $t('header.drawer.user.menu_5') }}</router-link>
                        </li>
                        <li>
                            <p style="font-size: 12px; color: rgba(255, 255, 255, 0.8); cursor: pointer" @click="logoutAction()">{{ $t('header.drawer.user.menu_6') }}</p>
                            <!-- <router-link @click="userDialog = false">{{ $t('header.drawer.user.menu_6') }}</router-link> -->
                        </li>
                    </ul>
                </div>
            </div>
        </el-dialog>
    </header>
</template>

<script lang="ts" setup>
import { ref, onMounted, computed, reactive, watch } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import 'element-plus/theme-chalk/display.css'
import { useI18n } from 'vue-i18n'
import { setLocale, langList } from '@/locales/i18n'
import type { SupportedLocales } from '@/locales/i18n'
import type { MessageSchema } from '@/types/i18n'

import MessageList from '@/views/message/components/MessageList.vue'
import AddressBook from '@/views/message/components/AddressBook.vue'
import ChatSearch from '@/views/message/components/ChatSearch.vue'
import ChatComp from '@/views/message/components/ChatComp.vue'

import { useMsgSetDrawerStore } from '@/stores/msgSetDrawer'

import { useAuthStore } from '@/stores/auth'
import AuthService from '@/api/auth'

import CourseService from '@/api/course'
import type { CourseItem } from '@/types/course'

import { useUserStore } from '@/stores/user'
import UserService from '@/api/user'
import type { MessagePreference, MessagePreferencesValue, noticesItem } from '@/types/user'

import { useRoleStore } from '@/stores/role'

const router = useRouter()
const route = useRoute()
const msgSetDrawerStore = useMsgSetDrawerStore()
const roleStore = useRoleStore()
const authStore = useAuthStore()
const userStore = useUserStore()
const loading = ref(false)
const { locale } = useI18n<{ message: MessageSchema }, SupportedLocales>()
const goPage = (path: string) => {
    msgDrawer.value = false
    addressBookDrawer.value = false
    chatSearchDrawer.value = false
    userDialog.value = false
    closeMsgSetDrawer()
    closeChatDrawer()

    router.push(path)
}

// 语言切换
const switchLangHandle = (lang: SupportedLocales) => {
    setLocale(lang)
    locale.value = lang
}

// 课程列表
const courseList = ref<CourseItem[]>([])
const courseListLoading = ref(false)
function getCourseList() {
    courseListLoading.value = true
    CourseService.listToPersonal()
        .then(res => {
            courseList.value = res
        })
        .finally(() => {
            courseListLoading.value = false
        })
}

// 消息
const key = 'message_preferences'
const msgDrawer = ref(false)
const addressBookDrawer = ref(false)
const chatSearchDrawer = ref(false)
const chatDrawer = ref(false)
const setFormLoading = ref(false)
const setFormData = ref<MessagePreferencesValue>({
    who_can_send_message: 1,
    isEmail: true,
    isDevice: false,
    use_input_key: 0,
})
const submitHandle = () => {
    setFormLoading.value = true
    if (!userStore.userinfoL) return
    UserService.preferenceUpdate(userStore.userinfoL.id, key, setFormData.value).finally(() => {
        setTimeout(() => {
            setFormLoading.value = false
        }, 1000)
    })
}
function getMessagePreference() {
    if (!userStore.userinfoL) return
    loading.value = true
    UserService.preferenceByKey<MessagePreference>(userStore.userinfoL.id, key)
        .then(res => {
            setFormData.value = res.value
        })
        .finally(() => {
            loading.value = false
        })
}

// 打开讯息搜索窗口
const openChatSearchDrawer = () => {
    chatSearchDrawer.value = true
}
// 打开讯息设置窗口
const openMsgSetDrawer = () => {
    msgSetDrawerStore.openMsgSetDrawer()
}
// 关闭讯息设置窗口
const closeMsgSetDrawer = () => {
    msgSetDrawerStore.closeMsgSetDrawer()
}
// 打开通讯录窗口
const openAddressBookDrawer = () => {
    addressBookDrawer.value = true
}
// 打开聊天窗口
const chatCompRef = ref()
const openChatDrawer = (id, info) => {
    chatDrawer.value = true
    chatCompRef.value.initDialog(id, info)
}
// 关闭聊天窗口
const closeChatDrawer = () => {
    chatDrawer.value = false
}

// 用户信息弹窗
const userDialog = ref(false)
const userinfo = computed(() => userStore.userinfoL)

watch(
    () => userStore.userinfoL,
    () => {
        getMessagePreference()
    },
)

onMounted(() => {
    authStore.scheduleTokenExpirationCheck()
    getCourseList()
    getMessagePreference()
    getNoticesUnreadList()
    getNoticesNumber()
    getMessageNumber()
})

import { formatLoginTime } from '@/utils/global'
// 获取未读通知列表
const noticesLoading = ref(false)
const noticesUnreadList = ref<noticesItem[]>([])
const getNoticesUnreadList = () => {
    noticesLoading.value = true
    CourseService.getNoticesUnreadList()
        .then(res => {
            noticesUnreadList.value = res || []
        })
        .finally(() => {
            noticesLoading.value = false
        })
}

// 获取未读通知数量
const noticesNumber = ref(0)
const getNoticesNumber = () => {
    CourseService.getNoticesUnreadCount()
        .then(res => {
            noticesNumber.value = res > 99 ? 99 : res
        })
        .finally(() => {})
}

// 获取未读消息数量
const messageNumber = ref(0)
const getMessageNumber = () => {
    CourseService.getCommunicationUnreadCount()
        .then(res => {
            messageNumber.value = res > 99 ? 99 : res
        })
        .finally(() => {})
}

// 标记为已读
const readAction = (id: number) => {
    CourseService.putNoticesRead(id).then(() => {
        getNoticesUnreadList()
    })
}
// 退出登录
const logoutAction = () => {
    AuthService.logout().then(() => {})
}

import { Document, Menu as IconMenu, Location, Setting } from '@element-plus/icons-vue'


// 显示与隐藏手机端导航
const isShowMenu = ref(false)
const toggleIsShowMenu = () => {
    isShowMenu.value = !isShowMenu.value
}
</script>

<style lang="less" scoped>
:deep(.custom-drawer-body) {
  padding: 0 !important; /* 提高优先级 */
}
.mobile-nav-wrap {
    
    .mobile-nav {
        
        height: 100%;
        background-color: #fff;

        .logo-nav {
            width: 80%;
            margin: 20px auto 30px;
            img {
                filter: unset !important;
                display: block;
                width: 100%;
            }
        }
        .el-menu-vertical {
            height: 70vh;
            overflow-y: auto;
            overflow-x: hidden;
        }
        .fix-bottom {
            position: absolute;
            bottom: 40px;
            left: 0;
            width: 100%;
            .lange {
                display: flex;
                justify-content: center;
                align-content: center;
                margin-top: 10px;
            }
        }
    }
}
header {
    position: sticky;
    top: 0;
    z-index: 2000;
    background-color: rgba(240, 100, 35, 0.95);
    // background-color: rgba(255, 255, 255, 0.05);

    .container-fluid {
        display: flex;
        align-items: center;
        justify-content: space-between;
        height: 95px;

        .logo-nav {
            display: flex;
            align-items: center;
            gap: 45px;

            .logo {
                filter: brightness(0) invert(1);
            }

            nav {
                & > ul {
                    display: flex;
                    align-items: center;
                    gap: 16px;

                    margin: 0;
                    padding: 0;
                    list-style: none;

                    li {
                        padding: 0;
                        font-size: var(--el-font-size-base);
                        line-height: 1.2;
                        position: relative;
                        list-style: none;

                        a {
                            font-size: var(--el-font-size-base);
                            color: #fff;
                            text-decoration: none;
                            display: block;
                            line-height: 1.2;
                        }

                        .el-dropdown {
                            color: #fff;
                            align-items: center;

                            .el-dropdown-link {
                                display: flex;
                                align-items: center;
                                line-height: 1.2;
                            }
                        }
                    }
                }
            }
        }

        .menu-toggle {
            // display: none;
        }

        .header-tools {
            display: flex;
            align-items: center;
            gap: 15px;

            & > .el-icon {
                cursor: pointer;
            }

            .tool-login {
                display: flex;
                align-items: center;
                gap: 4px;
                color: #fff;
                cursor: pointer;
            }

            :deep(.el-popover) {
                --el-popover-border-radius: 0;
                --el-popover-padding: 0;

                .popover-head {
                    display: flex;
                    align-items: center;
                    justify-content: space-between;

                    border-bottom: 1px solid #ddd;
                    padding: 0 5px;
                    font-size: 14px;
                    color: #000;
                    height: 25px;
                    line-height: 25px;

                    .tools-list {
                        display: flex;
                        align-items: center;
                        gap: 15px;

                        .el-icon {
                            transition: color 0.35s ease-in-out;
                            cursor: pointer;

                            &:hover {
                                color: #242424;
                            }
                        }
                    }
                }

                .popover-body {
                    height: 442px;
                    overflow-y: auto;
                    overflow-x: hidden;
                }

                .popover-foot {
                    border-top: 1px solid #ddd;
                    text-align: center;
                    font-size: 15px;
                    color: #e63946;
                    transition: color 0.35s ease-in-out;
                    line-height: 30px;
                    height: 30px;
                    cursor: pointer;

                    &:hover {
                        color: #242424;
                    }
                }
            }
        }
    }

    .drawer-box {
        position: fixed;
        right: 0;
        top: 0;
        z-index: 99;
        transform: translateX(100%);
        transition: transform 0.35s ease-in-out;

        box-shadow: -2px 2px 4px rgba(0, 0, 0, 0.08);
        height: 100vh;
        width: 320px;
        background-color: #eff1f3;

        display: flex;
        flex-direction: column;

        &.open {
            transform: translateY(0);
        }

        .drawer-head {
            border-bottom: 1px solid #d5d5d5;
            padding: 4px;
            background-color: #f4f4f4;
            background-image: url(@/assets/img/strip1_black8.svg);
            height: 34px;
            line-height: 34px;

            display: flex;
            justify-content: flex-end;
            align-items: center;
            flex-shrink: 0;

            .el-icon {
                cursor: pointer;
            }
        }

        .drawer-body {
            flex-grow: 1;
            background-color: #ffffff;
            overflow: hidden;

            display: flex;
            flex-direction: column;

            .back-box {
                border-bottom: 1px solid #dee2e6 !important;
                padding: 0 10px;
                font-size: 15px;
                color: #4c4c4c;
                background-color: #eff1f3;
                min-height: 44px;

                display: flex;
                justify-content: space-between;
                align-items: center;
                flex-shrink: 0;

                .cursor {
                    cursor: pointer;
                }

                .back-info {
                    display: flex;
                    align-items: center;
                    gap: 4px;
                }

                .el-icon {
                    cursor: pointer;
                }
            }

            .el-form {
                padding: 15px;
                // height: calc(100% - 44px);
                flex-grow: 1;
                overflow-y: auto;

                :deep(.el-form-item) {
                    .el-form-item__label {
                        color: #000;
                    }

                    &.btn-list {
                        .el-form-item__content {
                            display: flex;
                            justify-content: center;
                        }
                    }
                }

                p.tips {
                    font-size: 14px;
                    color: #4c4c4c;
                }

                .switch-box {
                    width: 100%;
                }
            }
        }

        .drawer-foot {
            flex-shrink: 0;

            & > span {
                cursor: pointer;
                line-height: 25px;
                height: 25px;
                color: #4c4c4c;
                text-align: center;
                display: block;
                transition: color 0.35s ease-in-out;
                font-size: 15px;

                &:hover {
                    color: #242424;
                }
            }
        }
    }

    :deep(.user-dialog-box) {
        --el-dialog-box-shadow: none;
        --el-dialog-bg-color: transparent;
        --el-message-close-size: 30px;
        --el-dialog-margin-top: 13vh;
        background-color: transparent;

        .el-dialog__header {
            border: 0;
            padding: 0;

            .el-dialog__headerbtn {
                transform: translateX(100%);

                .el-dialog__close {
                    color: #fff;
                }
            }
        }
    }

    .theme-loginform {
        .user-picture-container {
            border-radius: 2px;
            padding: 35px 25px;
            background-color: #fff;

            display: flex;
            flex-direction: column;
            align-items: center;

            .user-picture {
                margin-bottom: 25px;
                border-radius: 50%;
                width: 80px;
                height: 80px;
                background-color: #e6e6e6;
                overflow: hidden;

                display: flex;
                align-items: center;
                justify-content: center;
            }

            .user-description {
                text-align: center;
                font-size: 15px;
                color: #4c4c4c;
                line-height: 1.666;

                span {
                    .nline {
                        display: block;
                    }
                }

                .user-buttons {
                    margin-top: 25px;

                    .el-button {
                        color: #fff;
                        font-size: 12px;
                    }
                }
            }
        }

        .usermenu {
            padding: 0 3%;

            ul {
                padding: 10px 15px;
                background-color: #f06423;

                li {
                    border-bottom: 1px solid rgba(255, 255, 255, 0.15);
                    line-height: 40px;

                    display: flex;
                    align-items: center;
                    justify-content: center;
                    gap: 6px;

                    &:last-child {
                        border: none;
                    }

                    a {
                        color: rgba(255, 255, 255, 0.8);
                        font-size: 12px;
                        transition: color 0.35s ease-in-out;

                        &:hover {
                            color: #fff;
                        }
                    }
                }
            }
        }
    }
}

.notice-list {
    box-sizing: border-box;
    padding: 0 15px;
    max-height: 400px;
    overflow-y: auto;
    li {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        border-bottom: 1px solid #ddd;
        padding: 10px 0;
        cursor: pointer;
        h4 {
            font-size: 14px;
            // white-space: nowrap;
            // overflow: hidden;
            // text-overflow: ellipsis;
            max-width: 280px;
        }
        p {
            font-size: 12px;
            margin-top: 5px;
        }
    }
}
.notices-icon-wrap {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;

    .notices-number {
        position: absolute;
        top: -12px;
        right: -12px;
        width: 20px;
        height: 20px;
        background-color: #e63946;
        color: #fff;
        border-radius: 50%;
        font-size: 10px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
}
.message-icon-wrap{
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;

    .message-number {
        position: absolute;
        top: -12px;
        right: -12px;
        width: 20px;
        height: 20px;
        background-color: #e63946;
        color: #fff;
        border-radius: 50%;
        font-size: 10px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
}
</style>
